<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: header(~{::title})">
    <link rel="stylesheet" type="text/css" href="../static/semantic.min.css" th:href="@{/semantic.min.css}">
    <script
            src="https://code.jquery.com/jquery-3.1.1.min.js" th:src="@{/jquery-3.1.1.min.js}"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>
    <script src="../static/semantic.min.js" th:src="@{/semantic.min.js}"></script>

    <meta charset="UTF-8">
    <title>windanchaos</title>
</head>
<body>
<!--
1、menu的大小不知道怎么控制，加huge等无效
2、博客列表的边框线不知道怎么操作让其消失
3、顶部菜单栏的浮动效果，没有研究js怎么操作（js操作的理解为高级功能，不接触）

-->
<div class="ui borderless main menu " th:replace="_fragments::menu(1,blue)">
    <div class="ui huge text container">
        <a class="item active blue" href="#">
            <i class="home icon"></i> 主页
        </a>
        <a class="item" href="category.html" th:href="category">
            <i class="folder icon"></i> 分类
        </a>
        <a class="item" href="archive.html" th:href="archive">
            <i class="archive icon"></i> 归档
        </a>
        <a class="item" href="tags.html" th:href="tags">
            <i class="tags icon"></i> 标签
        </a>
        <div class="ui simple green dropdown item">
            更多
            <i class="dropdown icon"></i>
            <div class="menu">
                <a class="item"><i class="chess king icon"></i> 关于作者</a>
                <a class="item"><i class="language icon"></i> 选择语言</a>
                <a class="item"><i class="settings icon"></i> 账号设置</a>
            </div>
        </div>
        <div class="right item">
            <div class="ui icon input">
                <input type="text" placeholder="搜索...">
                <i class="search icon"></i>
            </div>
        </div>
    </div>
</div>
<div class="ui borderless grid">
    <div class="ui two wide column"></div>
    <div class="ui eleven wide column">
        <div class="ui container">
            <div class="ui raised segment" th:each="blog: ${pageInfo.getList()}">
                <h2 class="ui header"><a class="ui blue" th:text="${blog.title}" th:href="'/blog/'+${blog.getId()}">一种VPN自动设置的解决方案</a>
                </h2>
                <div class="ui">
                    <div class="ui label">发布时间:
                        <time th:text="${#dates.format(blog.create_time,'yyyy-MM-dd hh:mm:ss')}">2020/04/01 13:30</time>
                    </div>
                    <div class="ui label">分类:<span th:each="category:${categories.getCategoriesByArticleID(blog.id)}"><a
                            href="#" th:href="@{'/category/'+${category.id}}" th:text="' | '+${category.name} +' | '">持续集成</a> </span>
                    </div>
                    <div class="ui label">阅读数:23</div>
                </div>
                <div class="ui divider"></div>
                <div th:id="'testEditormdView'+${blog.id}" class="editormd">
                            <textarea id="append-test" style="display:none;" th:text="${blog.des}">
                                将之前写过的一个小工具做了一些优化，开源出来。起了个没有任何意义的ppter。

                                ppter概述
                                为什么叫ppter
                                任性，没有意义，听着挺好听，嗯就这样。

                                项目地址： https://github.com/windanchaos/ppter

                                可用场景
                                多地办公，没有固定IP，需办公区对办公区建立VPN，办公区和阿里云建立VPN的场景。

                                能节省的费用就是两条固定IP的费用。拒我了解的一个固定IP的电信一年30万左右，移动的要10来万。对于小公司来说，一年还是能节约不少钱了。
                            </textarea>
                </div>
                <div class="ui button"><a href="#" th:href="'/blog/'+${blog.getId()}">Read more »</a></div>
            </div>
            <div class="ui mini pagination menu right floated">
                <a class="item" id="pre" th:href="@{/blog(page=${pageInfo.getPrePage()})}"
                   th:unless="${pageInfo.isIsFirstPage()}">上一页</a>
                <a class="item" id="next" th:href="@{/blog(page=${pageInfo.getNextPage()})}"
                   th:unless="${pageInfo.isIsLastPage()}">下一页</a>
            </div>
        </div>

    </div>

</div>
<div class="ui three wide column"></div>
</div>

</div>

</div>
<!-- <script src="js/zepto.min.js"></script>
<script>
    var jQuery = Zepto;  // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
</script> -->
<script th:src="@{/lib/marked.min.js}"></script>
<script th:src="@{/lib/prettify.min.js}"></script>

<script th:src="@{/lib/raphael.min.js}"></script>
<script th:src="@{/lib/underscore.min.js}"></script>
<script th:src="@{/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/lib/flowchart.min.js}"></script>
<script th:src="@{/lib/jquery.flowchart.min.js}"></script>

<script th:src="@{/editormd.min.js}"></script>

<script type="text/javascript">

    $('.editormd').each(function () {
        //console.log($(this).attr('id'))
        editormd.markdownToHTML($(this).attr('id'), {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });
    })
    ;
</script>

</body>
</html>